<template>
  <div class="app-container">
    <div class="title">车型白名单设置</div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item
        key="vehicleModel"
        label="车型："
        prop="vehicleModel"
        :rules="[
          { required: true, message: '请选择车型', trigger: 'blur' },
          { type: 'array' },
        ]"
      >
        <el-select
          v-model="ruleForm.vehicleModel"
          style="width: 100%"
          placeholder="请选择车型"
          multiple
          clearable
          filterable
          :disabled="isEdit"
          @change="$forceUpdate()"
        >
          <el-option
            v-for="(item, index) in modelOptios"
            :key="index + '_' + item.modelName"
            :label="item.modelName"
            :value="item.modelName"
          />
        </el-select>
      </el-form-item>
      <div class="modelList">已选择车型：{{ ruleForm.vehicleModel.join('、') }}</div>
      <div class="actions-button">
        <el-button
          type="primary"
          :loading="submitLoading"
          @click="submitForm('ruleForm')"
        >
          {{ isEdit ? '修 改' : '保 存' }}
        </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getStorageByKey } from '@/utils/public'
import { detailWhiteListSeries, addWhiteListSeries } from '@/api/crossRegionalMonitoring'
export default {
  name: 'VehicleModelWhite',
  data() {
    return {
      vehicleOptions: getStorageByKey('vehicleMap'),
      modelOptios: [],
      ruleForm: {
        vehicleModel: []
      },
      submitLoading: false,
      isEdit: false
    }
  },
  created() {
    this.initModeOptions()
    this.queryDetailWhiteListSeries()
  },
  methods: {
    async queryDetailWhiteListSeries() {
      const { data } = await detailWhiteListSeries()
      const items = data
      console.log(items)
      this.isEdit = !!items.length
      this.ruleForm.vehicleModel = items
      // const { keywordList, historyKeywordList, monitorKeywordList, historyMonitorKeywordList } = items
      // this.keyWords.tags = keywordList
      // this.keyWords.history = historyKeywordList
      // this.monitoringKeyWords.tags = monitorKeywordList
      // this.monitoringKeyWords.history = historyMonitorKeywordList
    },
    initModeOptions() {
      const allModel = this.vehicleOptions.reduce((newArr, current) => {
        return newArr.concat(current.modelNameList)
      }, [])
      this.modelOptios = allModel
    },
    submitForm(formName) {
      if (this.isEdit) {
        this.isEdit = false
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = { seriesList: this.ruleForm.vehicleModel }
          this.submitLoading = true
          addWhiteListSeries(params).then(res => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.queryDetailWhiteListSeries()
          }).finally(() => {
            this.submitLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
   .title{
        font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
        font-weight: 650;
        font-style: normal;
        font-size: 16px;
        color: #333;
        line-height: 100px;
    }
    .modelList{
        color: #02a8ac;
        font-size: 12px;
        padding: 0 40px;
        margin: 20px;
    }
    .actions-button{
        text-align: center;
    }
}
</style>
